﻿@using ABC.Controllers.ViewModels.My
@model CalcKaskoExpressViewModel
@{
    ViewBag.Title = "Экспресс-расчет тарифа КАСКО - Азбука24";
    Layout = "~/Views/Shared/_MyLayout.cshtml";
}
<div class="page-header">
    <h2>
        Расчет тарифа КАСКО</h2>
</div>
<script type="text/javascript">
    var p1, p2;
    var pastTime = 0;
    var interval = 300;
    var data;
    var percent = 50;
    $(document).ready(function () {
        var viewModel = new MyViewModel();
        $("#startCalc").bind("click", buttonStartHandler1);
        $("#cancelCalc").bind("click", buttonAbortHandler1);
        //Обновляем Модель авто
        if ($("#car-manufacture").val() != "---") {
            GetModelsAuto();
        }
        $(".alert .close").bind("click", function (e) {
            $(e.target).parent(".alert").addClass("hide");
        });
        //Обновляем раздел "водители" после постбэка
        ChangeDrivers();
        ko.applyBindings(viewModel);
    });

    function buttonStartHandler1() {
        var isPost = true;
        if ($("#car-manufacture").val() == "---") {
            ShowAlertError("Для расчета необходимо выбрать Марку");
            isPost = false;
        }
        else if ($("#car-model").val() == "") {
            ShowAlertError("Для расчета необходимо выбрать Модель");
            isPost = false;
        }
        else if ($("#cost").val() == "" || isNaN($('#cost').asNumber({ region: 'ru-RU' }))) {
            ShowAlertError("Корректно заполните поле \"Страховая стоимость\"");
            isPost = false;
        }
        else {
            if (!$("#limitedDrivers").hasClass("hide")) {
                for (var i = 0; i < $("input[name='age']").length; i++) {
                    if (isNaN($("input[name='age']").eq(i).val()) || $("input[name='age']").eq(i).val() == "" || isNaN($("input[name='expirience']").eq(i).val()) || $("input[name='expirience']").eq(i).val() == "") {
                        ShowAlertError("Корректно заполните всю информацию в разделе \"Сведения о водителях\"");
                        isPost = false;
                        break;
                    }
                }
            }
        }
        if (isPost) {
            CalcCaskoExpress();
        }
    }

    function CalcCaskoExpress() {
        $("#progress").modal("show");
        $(".bar").css("width", "0");
        pastTime = 0; percent = 50;
        $("#time").text("Прошло времени: 0 сек");
        $('#result tbody').html("");

        p1 = new ProgressBar();
        p1.setInterval(interval)
          .callback(function (status) {
              var currentPercent = status.replace(" %", "");
              console.log(pastTime);
              if (percent >= 50 && pastTime > interval && percent < 90 && currentPercent == 50) { //Если длительное время 50% - увеличивает постепенно на 5 до 90%
                  percent = Math.ceil(percent + 5);
                  console.log(percent);
              }
              if (Math.ceil(currentPercent) > percent) {
                  percent = Math.ceil(currentPercent);
              }
              $(".bar").css("width", percent + "%");

              var message;
              pastTime = pastTime + interval;
              if (pastTime / 1000 < 1) {
                  message = "Прошло времени: " + Math.round(pastTime / 1000) + " сек";
              } else {
                  if (pastTime / 1000 > 60) {
                      var minutes = Math.floor(pastTime / 60000);
                      message = "Прошло времени: " + minutes + " мин" + pastTime + " сек";
                  }
                  else {
                      message = "Прошло времени: " + Math.round(pastTime / 1000) + " сек";
                  }
              }
              $("#time").text(message);

          },
                    function (result) {
                        if (result[0].KaskoValue) {
                            $(".bar").css("width", "100%");
                            window.setTimeout(UpdateTable, 1000);
                            data = result;
                        } else if (result != "abort") {
                            $('#progress').modal('hide');
                            ShowAlertError(result);
                        }
                        else {
                            $('#progress').modal('hide');
                        }
                    },
                    function () { $(".bar").css("width", "0"); })
          .start('@Url.Action("CalcKaskoExpress", "Information")', '@Url.Action("Status", "Information")', '@Url.Action("Abort", "Information")', $("#form1").serialize());
    }

    function UpdateTable() {
        $('#progress').modal('hide');
        for (var i = 0; i < data.length; i++) {
            var item = "<tr>" +
               "<td>" + data[i].CompanyName + "</td>" +
               "<td><ul class='unstyled'><li><strong>" + data[i].KaskoValue + " руб.</strong></li>" + "<li>" + data[i].KaskoRate + "%</li></ul></td>" +
               "<td><select class='input-mini' id='sale-percent'><option>0%</option><option>1%</option><option>2%</option><option>3%</option><option selected='selected'>4%</option></select></td>" +
               "<td><ul class='unstyled'><li><i class='icon-shopping-cart' title='Получить с клиента'></i> 30 946 руб.</li><li><i class='icon-money' title='Заработок'></i>" + data[i].Discount + " руб.</li></ul></td>" +
               "</tr>";
            $('#result tbody').append(item);
        }
        $(".alert").addClass("hide");                       //скрыть окно ошибки при успешном расчете
        $('body,html').animate({ scrollTop: 0 }, 800);      //прокрутить окно вверх      
    }


    function buttonAbortHandler1() {
        p1.abort();
    }

    function GetModelsAuto() {
        $.getJSON('@Url.Action("GetModelsAuto", "Information", new { area = "" })' + "?modelAuto=" + $("#car-manufacture").val(), function (data) {
            var models = JSON.parse(data);
            var carModel = document.getElementById("car-model");
            var carModelLength = carModel.options.length;
            for (var i = 0; i < carModelLength; i++) {
                carModel.remove(carModel.options[i]);
            }
            for (var j = 0; j < models.length; j++) {
                carModel.options[j] = new Option(models[j], models[j]);
            }
            GetCost();
        });
    };
    function GetCost() {
        $("#average_cost").text("");
        $("#average_cost").attr("href", "");
        if ($("#car-manufacture").val() && $("#car-model").val() && $("#release").val()) {
            $.ajax({
                url: '@Url.Action("GetCostCar", "Information")',
                type: "POST",
                data: { manufacture: $("#car-manufacture").val(), model: $("#car-model").val(), release: $("#release").val() },
                success: function (data) {
                    if (data == "no") {

                    } else {
                        $("#average_cost").text(data);
                        $("#average_cost").attr("href", "http://auto.yandex.ru/avg-price.xml?rid=225" + "&mark=" + $("#car-manufacture").val().toUpperCase() + "&model=" + $("#car-model").val().toUpperCase() + "&year=" + $("#release").val());
                    }
                },
                error: function (jqXhr, textStatus, errorThrown) {
                    //делаем что-то в случае ошибки
                },
                complete: function () {
                    //делаем что-то по завершению
                }
            });
        }
    }
    function MyViewModel() {
        var self = this;
        self.currentIndex = 1;
        self.drivers = ko.observableArray(["0"]);

        self.addDriver = function () {
            if (self.drivers().length < 5) {
                self.drivers.push((self.currentIndex++).toString());
            }
        };

        self.deleteDriver = function (id) {
            if (self.drivers().length > 1)
                self.drivers.remove(id);
        };

        self.resetForm = function () {
            $("#form1").trigger('reset');
            var carModel = document.getElementById("car-model");
            var carModelLength = carModel.options.length;
            for (var i = 0; i < carModelLength; i++) {
                carModel.remove(carModel.options[i]);
            }
            carModel.options[0] = new Option("---", "");
            self.drivers(["0"]);
        };
    }

    function ClarifyCalculation() {
        var kaskoExpressData = new Object();
        kaskoExpressData.CarManufacture = $("#car-manufacture").val();
        kaskoExpressData.CarModel = $("#car-model").val();
        kaskoExpressData.Release = $("#release").val();
        kaskoExpressData.Power = $("#power").val();
        kaskoExpressData.Credit = $("#Credit").val();
        kaskoExpressData.Cost = $("#cost").val();
        kaskoExpressData.Currency = $("#currency").val();
        kaskoExpressData.Path = $("#path").val();
        kaskoExpressData.UnitPath = $("#unit").val();
        kaskoExpressData.Signaling = $("#signaling").val();
        kaskoExpressData.Immo = $("#immo").val();
        kaskoExpressData.TypeDrivers = $("input[name='Driver']:checked").val();
        kaskoExpressData.Drivers = [];
        var countDrivers = $("#limitedDrivers table tbody tr").length;
        if (kaskoExpressData.TypeDrivers == "Ограниченное количество") {
            for (var i = 0; i < countDrivers; i++) {
                var driver = new Object();
                driver.Sex = $("#limitedDrivers table tbody tr").eq(i).children("td").eq(0).children("#Sex").val();
                driver.Age = $("#limitedDrivers table tbody tr").eq(i).children("td").eq(1).children("input[name='age']").val();
                driver.Experience = $("#limitedDrivers table tbody tr").eq(i).children("td").eq(2).children("input[name='expirience']").val();
                driver.Married = $("#limitedDrivers table tbody tr").eq(i).children("td").eq(3).children("#Married").val();
                driver.Children = $("#limitedDrivers table tbody tr").eq(i).children("td").eq(4).children("#Children").val();
                kaskoExpressData.Drivers.push(driver);
            }
        }
        if (kaskoExpressData.TypeDrivers == "Неограниченное количество") {
            kaskoExpressData.MinAge = $("#min-age").val();
            kaskoExpressData.MinPeriod = $("#min-period").val();
        }
        var postform = document.createElement('form');
        postform.action = '@Url.Action("ClarifyCalculation", "Information")';
        postform.method = 'post';
        postform.acceptCharset = 'utf-8';
        postform.appendChild(CreateHiddenField('kaskoExpressData', JSON.stringify(kaskoExpressData)));
        document.body.appendChild(postform);
        postform.submit();
    }
</script>
<div id="alert" class="alert alert-error fade in hide">
    <button class="close">
        ×</button>
    <ul class="unstyled">
        <li></li>
    </ul>
</div>
<div class="tabbable">
    @{ Html.RenderPartial("_CalcKaskoMenu", new CalcKaskoViewModel());}
    <div class="tab-content">
        <div class="tab-pane active" id="calc">
            <div class="row-fluid">
                <div class="span6">
                    @using (Html.BeginForm("CalcKaskoExpress", "Information", FormMethod.Post, new { @class = "form-horizontal", id = "form1" }))
                    {
                        <fieldset>
                            <div class="control-group">
                                <label class="control-label" for="car-manufacture">
                                    Марка</label>
                                <div class="controls">
                                    @Html.DropDownListFor(m => m.BrandAuto, Model.BrandsAuto, new { @class = "input-large", id = "car-manufacture", onchange = "GetModelsAuto();" })
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="car-model">
                                    Модель</label>
                                <div class="controls">
                                    @Html.DropDownListFor(m => m.ModelAuto, Model.ModelsAuto, new { @class = "input-large", id = "car-model", onchange = "GetCost();" })
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="release">
                                    Год выпуска</label>
                                <div class="controls">
                                    @Html.DropDownListFor(m => m.Year, Model.Years, new { @class = "input-small", id = "release", onchange = "GetCost();" })
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="power">
                                    Мощность</label>
                                <div class="controls">
                                    @Html.TextBoxFor(m => m.Power, new { @class = "input-large", id = "power" })
                                    <span class="help-inline">л.с.</span>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="Credit">
                                    Кредит</label>
                                <div class="controls">
                                    @Html.DropDownListFor(x => x.Credit, Model.ListForCredit, "---", new { @class = "input-large" })
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="cost">
                                    Стоимость ТС</label>
                                <div class="controls">
                                    @Html.TextBoxFor(m => m.Cost, new { @class = "input-medium currency", id = "cost" })
                                    <select class="input-mini" id="currency" name="Currency">
                                        <option value="RUR">RUR</option>
                                        <option value="EUR">EUR</option>
                                        <option value="USD">USD</option>
                                    </select>
                                    <span class="help-block">Средняя цена: <a id="average_cost" href="http://auto.yandex.ru/avg-price.xml?rid=213&mark=VOLKSWAGEN&model=SCIROCCO&year=2011"
                                        title="Средняя цена в прошлом месяце. По данным Яндекс.Авто" target="_blank"></a>
                                    </span>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="path">
                                    Пробег</label>
                                <div class="controls">
                                    <input type="text" class="input-medium" id="path" name="path">
                                    <select class="input-mini" id="unit" name="unitpath">
                                        <option value="км">км</option>
                                        <option value="мл">мл</option>
                                    </select>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="signaling">
                                    ЭПС</label>
                                <div class="controls">
                                    @Html.DropDownListFor(m => m.Signaling, Model.Signalings, new { @class = "input-large", id = "signaling" })
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="immo">
                                    Иммобилайзер</label>
                                <div class="controls">
                                    @Html.DropDownListFor(m => m.Immo, Model.Immos, new { @class = "input-large", id = "immo" })
                                </div>
                            </div>
                            <hr>
                            <div class="control-group">
                                <label class="control-label" for="drivers">
                                    Количество водителей</label>
                                <div class="controls">
                                    <label class="radio inline">
                                        @Html.RadioButtonFor(x => x.Driver, "Ограниченное количество", new { @checked = "checked", id = "drivers", onchange = "ChangeDrivers();" })
                                        Ограниченное
                                    </label>
                                    <label class="radio inline">
                                        @Html.RadioButtonFor(x => x.Driver, "Неограниченное количество", new { id = "drivers", onchange = "ChangeDrivers();" })
                                        Неограниченное
                                    </label>
                                </div>
                            </div>
                            <div id="limitedDrivers">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>
                                                Пол
                                            </th>
                                            <th>
                                                Возраст
                                            </th>
                                            <th>
                                                Стаж
                                            </th>
                                            <th>
                                                Брак
                                            </th>
                                            <th colspan="2">
                                                Дети
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody data-bind="foreach: drivers">
                                        <tr>
                                            <td>
                                                @Html.DropDownListFor(x => x.Sex, Model.ListSex, new { @class = "input-small" })
                                            </td>
                                            <td>
                                                <input type="text" class="input-mini" name="age">
                                            </td>
                                            <td>
                                                <input type="text" class="input-mini" name="expirience">
                                            </td>
                                            <td>
                                                @Html.DropDownListFor(x => x.Married, Model.ListMarried, new { @class = "input-mini" })
                                            </td>
                                            <td>
                                                @Html.DropDownListFor(x => x.Children, Model.ListChildren, new { @class = "input-mini" })
                                            </td>
                                            <td>
                                                <button class="btn" data-bind="click: $root.deleteDriver">
                                                    Удалить</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <button class="btn" data-bind="click: addDriver">
                                    Добавить водителя</button>
                            </div>
                            <div id="unlimitedDrivers" class="hide">
                                <div class="control-group">
                                    <label class="control-label" for="min-age">
                                        Минимальный возраст</label>
                                    <div class="controls">
                                        <input type="text" class="input-mini" id="min-age" name="min-age">
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" for="min-period">
                                        Минимальный стаж</label>
                                    <div class="controls">
                                        <input type="text" class="input-mini" id="min-period" name="min-period">
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <div class="form-actions">
                            <button class="btn btn-primary btn-large" id="startCalc" type="button">
                                Расчитать КАСКО</button>
                            <button class="btn" type="button" onclick="ClarifyCalculation();" title="Перенести данные в полный калькулятор КАСКО, для более детального проведения расча">
                                Уточнить расчет</button><!-- При нажатии данной кнопки значения внесенные в поля Экспресс-калькулятора должны переноситься в полный калькулятор -->
                            <button class="btn" title="Очистить значения полей формы" type="button" data-bind="click: resetForm">
                                Очистить форму</button>
                        </div>
                    }
                </div>
                <div class="span6">
                    <div class="widget widget-table action-table">
                        <div class="widget-header">
                            <i class="icon-star"></i>
                            <h3>
                                Лучшие предложения</h3>
                        </div>
                        <div class="widget-content">
                            <table id="result" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>
                                            Компания
                                        </th>
                                        <th>
                                            Тариф
                                        </th>
                                        <th colspan="2">
                                            Скидка
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal hide " id="progress">
    <div class="modal-header">
        <h3>
            Производится расчет. Ожидайте</h3>
    </div>
    <div class="modal-body">
        <div class="progress progress-striped active">
            <div class="bar" style="width: 0">
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <span class="pull-left" id="time">Прошло времени: 0 сек</span>
        <button data-dismiss="modal" id="cancelCalc" class="btn">
            Отменить расчет</button>
    </div>
</div>
